import { Button, Divider, Dropdown } from 'antd';
import { useState, useEffect } from 'react'
import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
import { resourcePath } from '../../../../../utils/resource';
import { routes } from '../../../../../utils/routes';
import './index.less';
import messageController from '../../../../../utils/messageController';
import TitleDate from '../TitleDate';
import Right from '../Right';
export default function Center(props) {
    const pathname = useLocation().pathname;
    const history = useHistory();
    const [currentPath, setCurrentPath] = useState('统计分析');
    const [currentSubPath, setCurrentSubPath] = useState();
    const createItem = (name, title, items) => {
        const bgStyle = {
            fontSize: 20,
            fontWeight: 'bold',
            overflow: "hidden",
            backgroundImage: `url(${resourcePath.menuPng})`,
            backgroundSize: "100% 100%",
            backgroundPosition: "center",
            backgroundRepeat: "no-repeat",
            width: 144,
            padding: "10px 0 16px",
            textAlign: "center",
            cursor: "pointer"
            //     textAlign: "center", 
        };

        if (currentPath === name) {
            bgStyle.backgroundImage = `url(${resourcePath.menuSelectedPng})`;
        }
        const node = <div className='' style={bgStyle} onClick={e => {
            setCurrentPath(name);
            if (items) {
                setCurrentSubPath(items[0]);
            } else {
                setCurrentSubPath(null);
            }
            messageController.emit('to-path', name);
        }}>
            <div>{title || name}</div>
        </div>
        if (items) {
            return <div>
                <Dropdown overlayClassName='header-dropdown' menu={{
                    activeKey: currentSubPath,
                    items: items.map(item => ({

                        key: item,
                        label: item,
                        onClick: () => {
                            setCurrentPath(name);
                            setCurrentSubPath(item);
                            messageController.emit('to-path', item);
                        }
                    })),
                    // onClick: ({ key }) => {
                    //     setCurrentPath(name);
                    //     setCurrentSubPath(key);
                    //     messageController.emit('to-path', key);
                    // }
                }}>

                    {node}
                </Dropdown>
            </div>
        }
        return <div>{node}</div>
    }

    return <>
        <div className='header-center fill layout-h' style={{
            background: `url(${resourcePath.titleBg})`,
            backgroundSize: "100% 100%",
            height: 119
            //border: "1px solid black",
        }}>
            {/* {createItem('统计分析', '领导驾驶舱')}
                <Dropdown menu={{
                    onClick: ({ key }) => {
                        messageController.emit('to-path', key);
                    },
                    items: [{
                        label: '防汛监测',
                        key: '防汛监测',

                    }, {
                        key: '地震监测',
                        label: '地震监测'
                    }, {
                        label: '地灾监测',
                        key: '地灾监测'
                    }, {
                        label: '火灾监测',
                        key: '火灾监测'
                    }]
                }}>
                    {createItem('防汛监测')}
                </Dropdown>
                {createItem('风险隐患')} */}
            {/* <Divider type="vertical" /> */}
            {/* {createItem(routes.fxfx)} */}
            <div className='title' style={{
                fontWeight: 'bold',
                fontSize: 36,
                //textAlign: "center",
                cursor: 'pointer',
                width: "690px",
                background: `url(${resourcePath.title1})`,
                backgroundSize: "100% 100%",
                height: "82px",
                display: "flex",
                alignItems: "center",
                paddingLeft: 24
            }}
                onClick={e => {
                    // history.push('/main/home')
                }}
            >
                <div style={{
                    paddingBottom: 6
                }}>
                    嘉陵区风险普查成果数据应用平台
                </div>

            </div>
            <div className='layout-h fill' style={{
                paddingTop: 18,
                gap: 22
            }}>
                {createItem('统计分析', '领导驾驶舱')}
                {createItem('防汛监测', '监测预警', ['防汛监测', '地震监测', '地灾监测', '火灾监测'])}
                {createItem('风险隐患')}
                {createItem('风险区划分析')}
                {createItem('动态风险分析')}
                {createItem('风险评估')}
            </div>
            <div className='layout-h' style={{
                paddingTop: 18,
                paddingRight: 24,
                gap: 24
            }}>
                <Right />
                <TitleDate />
            </div>
            {/* {createItem('风险区划分析')}
                {createItem('动态风险分析')}
                {createItem('风险评估')} */}
            {/* {createItem(routes.manager, () => {
                    window.open(process.env.PUBLIC_URL + routes.manager.path, '_blank');
                })} */}
        </div>
    </>;
    // return <>
    //     <div className='layout-h center header-center' style={{
    //         position: "absolute",
    //         left: 650,
    //         top: 33,
    //         gap: 12
    //         //border: "1px solid black",
    //     }}>
    //         {/* {createItem(routes.home)} */}
    //         {/* {createItem(routes.yzt)} */}
    //         {/* {createItem(routes.jcyj2)} */}
    //         {/* {createItem(routes.fxqhfx)} */}
    //         {/* {createItem(routes.dtfxfx)} */}
    //         {/* {createItem(routes.zhpg)} */}
    //     </div>
    // </>;
}